<template>
  <a-modal
    v-model:visible="openVisible"
    :title="props.title"
    @ok="handleOk"
    @cancel="handleClose"
    ok-text="确定"
    cancel-text="取消"
    :maskClosable="false"
    style="width: 50%"
  >
    <a-form
      ref="modelFormRef"
      :model="formState"
      :rules="rules"
      name="basic"
      autocomplete="off"
    >
      <a-row type="flex">
        <a-col :span="24">
          <a-form-item
            :colon="false"
            :labelCol="{
              style:
                'width: 100px;height:40px;text-align:right;margin-bottom:0px',
            }"
            label="项目编号"
            name="projectNo"
          >
            <a-input
              v-model:value="formState.projectNo"
              allow-clear
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            :colon="false"
            :labelCol="{ style: 'width: 100px;height:40px;text-align:right' }"
            label="项目名称"
            name="projectName"
          >
            <a-input
              v-model:value="formState.projectName"
              allow-clear
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import {
  reactive,
  ref,
  UnwrapRef,
  nextTick,
  onMounted,
  defineProps,
} from "vue";
import type { Rule } from "ant-design-vue/es/form";
import { message } from "ant-design-vue";
import { create, modifyItem } from "@/api/project";
let openVisible = ref<boolean>(false);
const modelFormRef = ref<any>();
const props = defineProps({
  title: {
    type: String,
    default: "",
    required: true,
  },
  row: {
    type: Object,
    default: null,
    required: true,
  },
});
interface FormState {
  id: any;
  projectNo: string;
  projectName: string;
}
let formState: UnwrapRef<FormState> = reactive({
  id: null,
  projectNo: "",
  projectName: "",
});
const rules: Record<string, Rule[]> = {
  projectNo: [{ required: true, message: "请输入", trigger: "blur" }],
  projectName: [{ required: true, message: "请输入", trigger: "blur" }],
};
const data = reactive<any>({
  list: [],
});
const handleOk = () => {
  modelFormRef.value.validate().then((result: any) => {
    if (result) {
      if (props.title === "add") {
        create(formState).then((res: any) => {
          if (res.code == 2001) {
            message.success("添加成功");
          }
        });
      } else if (props.title === "edit") {
        modifyItem(formState).then((res: any) => {
          message.success("修改成功");
        });
      }
      openVisible.value = false;
      emit("onSumbit");
      modelFormRef.value.resetFields();
    }
  });
};
const handleClose = () => {
  openVisible.value = false;
  modelFormRef.value.resetFields();
};
const openModel = () => {
  openVisible.value = true;
  nextTick(() => {
    if (props.title !== "新增") {
      const { projectNo, projectName, id } = props.row || {};
      Object.assign(formState, {
        projectNo,
        projectName,
        id,
      });
    }
  });
};
onMounted(() => {});
const emit = defineEmits(["onSumbit"]);
defineExpose({
  openModel,
});
</script>
<style scoped lang="less">
.disable {
  pointer-events: none;
}

.title {
  line-height: 22px;
  margin-bottom: 16px;

  .line {
    border-radius: 2px;
    margin-right: 8px;
    height: 14px;
    border: solid 2px#1890ff;
  }

  span {
    display: inline-block;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    line-height: 20px;
    text-align: left;
    font-style: normal;
    vertical-align: middle;
  }
}

.actions {
  text-align: right;
  margin-bottom: 14px;
}

:deep(.ant-form-item-control-input-content) {
  height: 40px;
}

:deep(.ant-picker-input) {
  height: 40px;
}

:deep(.ant-input-affix-wrapper) {
  padding: 0px 10px;
}

:deep(.ant-picker) {
  height: 40px;
  padding: 0px 10px;

  input {
    height: 30px;
  }
}
</style>
